<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressOrderManagementLang.issueAccounts')"
      :visible.sync="Visible"
      width="100%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.customer')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.username"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.line')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.line_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Delivery_location')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.start_local_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.destination')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.target_local_name"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="this.recive_data.is_show===1">
          <div class="dialogBoxTitle">{{this.recive_data.name}}</div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in this.recive_data.list" :key="k">
              <div class="title">
                <div v-if="el.is_require===1" class="RequiredRowTip">*</div>
                {{el.name}}:
              </div>
              <div class="contant">
                <el-input
                  v-if="el.type===1"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  disabled
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  disabled
                  v-model="el.val">
                </el-input-number>
                <el-input
                  v-if="el.type===4||el.type===6"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-select
                  v-if="el.type===5&&el.item_id==='dispatch_type'"
                  disabled
                  v-model="el.val"
                >
                  <el-option
                    v-for="item in options_Delivery"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-if="el.type===5&&el.item_id==='contact_name'"
                  disabled
                  v-model="el.val"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="this.pickup_data.is_show===1">
          <div class="dialogBoxTitle">{{this.pickup_data.name}}</div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in this.pickup_data.list" :key="k">
              <div class="title">
                <div v-if="el.is_require===1" class="RequiredRowTip">*</div>
                {{el.name}}:
              </div>
              <div class="contant">
                <el-input
                  v-if="el.type===1"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  disabled
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  disabled
                  v-model="el.val">
                </el-input-number>
                <el-input
                  v-if="el.type===4||el.type===6"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-select
                  v-if="el.type===5&&el.item_id==='pickup_type'"
                  disabled
                  v-model="el.val"
                >
                  <el-option
                    v-for="item in options_take"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="this.goods_data.is_show===1">
          <div class="dialogBoxTitle">{{this.goods_data.name}}</div>
          <MyTable
          :tableColumn="tableColumn_goods"
          :tableData="tableData_goods"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Insurance_Information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.protection_type')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="insure_type"
                  filterable
                  @blur="handleBlur('insure_type', $event)"
                  @change="handleChang('insure_type')"
                  v-model="data.insure_type"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_protection"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div v-if="this.data.insure_type==3" class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Bubble_weight')}}:
              </div>
              <div class="contant">
                <el-input-number
                  :disabled="data.insure_type!=3"
                  controls-position="right"
                  size="small" 
                  ref="bw_rate" 
                  @blur="handleBlur('bw_rate', $event)" 
                  @focus="handleFocus($event)" 
                  :min="1" 
                  :precision="0"
                  v-model="data.bw_rate">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Insurance_unit_price')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  ref="insure_unit_price" 
                  @blur="handleBlur('insure_unit_price', $event)" 
                  @focus="handleFocus($event)" 
                  :min="0"  
                  :precision="2"
                  v-model="data.insure_unit_price">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Compensation_value')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  :min="0" 
                  v-model="data.compensation_max">
                </el-input-number>
              </div>
            </div>
          </div>
          <div v-if="is_show_insure" class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.buy_insurance')}}:
              </div>
              <div class="contant">
                <el-switch
                  disabled
                  v-model="data.is_insure"
                  :active-value="0"
                  :inactive-value="1"
                  active-color="#26BD00"
                  >
                </el-switch>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Insured_price')}}:
              </div>
              <div class="contant">
                <el-input-number
                  :disabled="data.is_insure!==0"
                  controls-position="right"
                  size="small" 
                  ref="insure_price" 
                  @blur="handleBlur('insure_price', $event)" 
                  @focus="handleFocus($event)" 
                  @change="setInsureCost('insure_price')"
                  :min="premium_min" 
                  :precision="2"
                  :max="premium_max"
                  v-model="data.insure_price">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Guarantee_rate')}}:
              </div>
              <div class="contant">
                <el-input-number
                  :disabled="data.is_insure!==0||sendDataArr_packages.length==0"
                  controls-position="right"
                  size="small" 
                  ref="premium_rate" 
                  @blur="handleBlur('premium_rate', $event)" 
                  @focus="handleFocus($event)" 
                  @change="setInsureCost"
                  :min="0"  
                  :precision="2"
                  v-model="data.premium_rate">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="0"  
                  v-model="data.insure_costs">
                </el-input-number>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Freight_information')}}</div>
          <div class="dialogBoxItem">
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Weight_measurement')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_calweight">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Volume_measurement')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_cal_volume">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.freight')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.out_trans_price">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.discount')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.discount">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.discount_Freight')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.discount_Freight_value">
                </el-input-number>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.insure_costs">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.service_charge')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.out_survey_price">
                </el-input-number>
                <div style="margin-left:5px;white-space:nowrap;color:#62afff;cursor:pointer;" @click="details">{{$t('common.details')}}</div>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Pre_discount_expenses')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.out_total_price">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Discounted_fees')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.Discounted_fees_value">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Payment_type')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.line_pay_type_name"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Package_information')}}</div>
          <div style="margin:5px 0;">
            <span>{{$t('ExpressOrderManagementLang.Number_packages')}}：</span>
            <el-input-number
              disabled
              style="width:100px"
              controls-position="right"
              size="small" 
              :min="0"  
              v-model="premium_num">
            </el-input-number>
          </div>
          <MyTable
            :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true,checkMethod:checkSelectable}}"
            :tableColumn="tableColumn_packages"
            :tableData="tableData_packages"
            :isOrder="false"
            @sendTabClick="setTabClick"
            @sendCheckBoxList="setCheckBox"
          >
            <template v-slot:content="scope">
              <span v-if="scope.config.templateType=='Select'">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                  <el-select
                    v-fo-select
                    @change="selectChange(scope.row,scope.config.prop)"
                    @visible-change="inputType"
                    v-model="scope.row[scope.config.prop]"
                  >
                    <el-option
                      v-for="item in options_protection"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>  
                </span>
                <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
              </span>
              <span v-else>
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                  <el-input-number 
                    v-fo
                    v-noFocu
                    v-if="scope.config.templateType=='InputNumber'"
                    v-model="scope.row[scope.config.prop]"
                    controls-position="right"
                    :min="0"
                    :precision="scope.config.precision"
                    @blur="inputBlur(scope.row,scope.config.prop)"
                    @change="inputChange(scope.row,scope.config.prop)"
                  ></el-input-number>
                  <el-input-number 
                    v-fo
                    v-noFocu
                    v-else-if="scope.config.templateType=='InputNumber_Bubble'&&scope.row.freight_category==3"
                    v-model="scope.row[scope.config.prop]"
                    controls-position="right"
                    :min="1"
                    :precision="0"
                    @blur="inputBlur(scope.row,scope.config.prop)"
                    @change="inputChange(scope.row,scope.config.prop)"
                  ></el-input-number>
                  <span v-else>{{ scope.row[scope.config.prop] }}</span>
                </span>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>
            </template>
          </MyTable>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.bill_remakes')}}</div>
          <div class="dialogBoxItem">
            <div style="width:100%;" class="dialogBoxItemRow">
              <div class="contant">
                <el-input
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.remark"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <ServiceFee
      @success="detailsSuccess"
      ref="serviceFee"
    ></ServiceFee>
  </div>
</template>

<script>
import { debounce } from '@/utils/func.js'
import ServiceFee from "./ExpressDeliveryOrderManagement_issueAccounts_ServiceFee";
export default {
  components: {ServiceFee},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      order_sn:'',
      lid:'',
      data:{},
      options_Delivery:[],
      options_take:[],
      is_show_insure:false,//是否可以买保险
      insure_is_required:false,//保险是否强制购买
      premium_min:0,//保险费最小值
      premium_max:0,//保险费最大值
      options_protection:[],
      goods_data:{},//商品配置项
      pickup_data:{},//提货信息配置项
      recive_data:{},//收货信息配置项
      ServiceFeeList:[],//服务费列表
      tableColumn_goods: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Product_Name'),
          prop: "goods_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.commodity_value'),
          prop: "goods_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Quantity_goods'),
          prop: "goods_num",
          width: 120,
        },
        
      ],
      tableData_goods: [],
      tableColumn_packages: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          type: 'checkbox',
          width: 40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Whether_issue_account'),
          prop: "out_bill_status_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Whether_pay_not'),
          prop: "pay_status_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Transportation_status'),
          prop: "trans_status_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Package_number'),
          prop: "package_sn",
          width: 250,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Express_Number'),
          prop: "express_sn",
          width: 200,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Gross_weight'),
          prop: "gross_weight",
          width: 120,
          templateType:'InputNumber',
          precision:3,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Weight_measurement'),
          prop: "weight",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.long'),
          prop: "length",
          width: 120,
          templateType:'InputNumber',
          precision:0,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.wide'),
          prop: "width",
          width: 120,
          templateType:'InputNumber',
          precision:0,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.high'),
          prop: "height",
          width: 120,
          templateType:'InputNumber',
          precision:0,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.volume'),
          prop: "volume",
          width: 120,
          templateType:'InputNumber',
          precision:5,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Volume_measurement'),
          prop: "cal_volume",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Freight_type'),
          prop: "freight_category",
          width: 120,
          templateType:'Select',
        },
        // {
        //   checked: true,
        //   label: this.$t('ExpressOrderManagementLang.Bubble_weight'),
        //   prop: "weight_calc_rule",
        //   width: 120,
        //   templateType:'InputNumber_Bubble',
        // },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Freight_unit_price'),
          prop: "freight_price",
          width: 120,
          templateType:'InputNumber',
          precision:2,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Whole_price'),
          prop: "whole_price",
          width: 120,
          templateType:'InputNumber',
          precision:2,
        },
        {
          checked: true,
          label: this.$t('ActiveConfigurationLang.Discount_amount'),
          prop: "deduction_amount",
          width: 120,
          templateType:'InputNumber',
          precision:2,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.freight'),
          prop: "freight_cost",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.remarks'),
          prop: "remarks",
          width: 120,
        },
      ],
      tableData_packages: [],
      sendDataArr_packages:[],
      premium_num:0,
      premiumRangeList:[],//保险费率取值区间数据
      tabClickIndex:null,
      tabClickLabel:null,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
    window.addEventListener("keydown", this.keydownFuc);
    window.addEventListener("keyup", this.keyupFuc);
  },
  destroyed(){
    window.removeEventListener("keydown", this.keydownFuc);
    window.removeEventListener("keyup", this.keyupFuc);
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.order_sn=data.order_sn
      this.lid=data.lid
      this.getOptions()
      this.getData()
      this.getServiceFeeList()
      this.Visible = true;
    },
    keydownFuc(){
      this.isCodeDown=true
      let code=window.event
      let index=this.tableColumn_packages.findIndex(item=>{return item.label===this.tabClickLabel})
      if(index!=-1){
        if(code.key=='Tab'&&code.keyCode==9){
          code.preventDefault()
          this.setTabLabel(this.tableColumn_packages,index+1)
        }
      }
    },
    keyupFuc(){
      this.isCodeDown=false
    },
    setTabLabel(arr,index){
      if(index>arr.length-1){
        this.setTabLabel(arr,0)
      }else{
        if(!!arr[index]&&!!arr[index].templateType){
          if(arr[index].templateType!=='InputNumber_Bubble'){
            this.tabClickLabel=arr[index].label
          }else{
            this.setTabLabel(arr,index+1)
          }
        }else{
          this.setTabLabel(arr,index+1)
        }
      }
    },
    //获取下拉单数据
    getOptions(){
      this.$get("orderSysItems").then((res) => {
        this.options_protection = res.data.premium_type;
      });
    },
    //获取服务费列表
    getServiceFeeList(){
      let package_sns=this.sendDataArr_packages.map((obj)=>{return ""+obj.package_sn}).join(",")
      this.$get("lineSurveys", {lid: this.lid,package_sns }).then((res) => {
        this.ServiceFeeList = res.data;
        if(this.ServiceFeeList.length>0){
          this.ServiceFeeList.forEach((el,k)=>{
            el.table_code=k+1
          })
        }
        this.setServiceFee()//计算服务费
      });
    },
    details(){
      let arr=this.tableData_packages.filter(item=>{return !!item.checked})
      this.$refs.serviceFee.init(this.ServiceFeeList,this.lid,arr)
    },
    detailsSuccess(arr){
      this.ServiceFeeList=arr
      this.data.out_survey_price=this.ServiceFeeList.reduce(function(acc, obj) {
        return acc + Number(obj.price?obj.price:0);
      }, 0);
      this.setPrice()
    },
    setServiceFee(){
      let arr=this.tableData_packages.filter(item=>{return !!item.checked})
      if(this.ServiceFeeList.length>0){
        if(arr.length>0){
          this.ServiceFeeList.forEach(item=>{
            if(item.chargeMethod==1){
              let item_price=arr.map(el=>{return this.$computing(Number(el.weight)*Number(item.unitPrice),'fixed',2)})
              item.price=item_price.reduce(function(acc, obj) {
                return acc + Number(obj);
              }, 0);
            }else if(item.chargeMethod==2){
              let item_price=arr.map(el=>{return this.$computing(Number(el.cal_volume)*Number(item.unitPrice),'fixed',2)})
              item.price=item_price.reduce(function(acc, obj) {
                return acc + Number(obj);
              }, 0);
            }else if(item.chargeMethod==4){
              let item_price=arr.map(el=>{return Number(item.unitPrice)})
              item.price=item_price.reduce(function(acc, obj) {
                return acc + Number(obj);
              }, 0);
            }else if(item.chargeMethod==5){
              item.price=Number(item.unitPrice)
            }else if(item.chargeMethod==6){
              item.price=Number(item.whole_price)
            }
            item.price=this.$computing(Number(item.price),'fixed',2)
          })
        }else{
          this.ServiceFeeList.forEach(item=>{
            if(item.chargeMethod==6){
              item.price=Number(item.whole_price)
            }else{
              item.price=0
            }
          })
        }
      }
      this.data.out_survey_price=this.ServiceFeeList.reduce(function(acc, obj) {
        return acc + Number(obj.price?obj.price:0);
      }, 0);
      this.data.out_survey_price=this.$computing(Number(this.data.out_survey_price),'fixed',2)
    },
    //获取单条
    getData() {
      this.$get("orderInfo", { order_sn: this.order_sn,lid: this.lid }).then((res) => {
        this.data = res.data;
        this.options_Delivery =res.data.lines[0].dispatch_type_arr
        this.options_take =res.data.lines[0].pickup_type_arr
        this.start_weight=res.data.lines[0].start_weight
        this.renew_weight=res.data.lines[0].renew_weight
        this.start_volume=res.data.lines[0].start_volume
        this.renew_volume=res.data.lines[0].renew_volume
        this.weight_type=res.data.lines[0].weight_type
        this.weight_calc_rule=res.data.lines[0].weight_calc_rule
        this.is_show_insure=res.data.line_info.is_insure==0
        this.data.compensation_max=Number(res.data.compensation_max)
        this.premium_min=Number(res.data.line_info.premium_min)
        this.premium_max=Number(res.data.line_info.premium_max)
        this.tableData_goods=res.data.goods

        this.$get("getItemsByLid", { lid: this.lid}).then((res) => {
          if(!!res.data.goods_info&&res.data.goods_info.list.length>0){
            this.goods_data=res.data.goods_info
            this.tableColumn_goods=[
              {
                label: "",
                prop: "table_code",
                width:40,
              },
            ]
            this.goods_data.list.forEach(item=>{
              let obj={}
              if(item.type===1){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'Input',
                  text_scale:Number(item.text_scale),
                }
              }else if(item.type===2){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'DatePicker',
                }
              }else if(item.type===3){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'InputNumber',
                  precision:Number(item.scale),
                }
                }else if(item.type===4||item.type===6){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'InputScale',
                  text_scale:Number(item.text_scale),
                }
              }
              this.tableColumn_goods.push(obj)
            })
          }
          if(!!res.data.pickup_info&&res.data.pickup_info.list.length>0){
            this.pickup_data=res.data.pickup_info
            if(this.data.pickup_information.length>0){
              this.pickup_data.list.forEach(el=>{
                this.data.pickup_information.forEach(ite=>{
                  if(el.item_id==ite.id){
                    el.val=ite.val
                  }
                })
              })
            }
          }
          if(!!res.data.recive_info&&res.data.recive_info.list.length>0){
            this.recive_data=res.data.recive_info
            if(this.data.recive_information.length>0){
              this.recive_data.list.forEach(el=>{
                this.data.recive_information.forEach(ite=>{
                  if(el.item_id==ite.id){
                    el.val=ite.val
                  }
                })
              })
            }
          }
        });
        this.data.remark=''
        this.setDataWeight()
        this.data.out_total_price=this.data.insure_costs
        this.data.Discounted_fees_value=this.data.insure_costs
        this.$get("billPackages", { order_sn: this.order_sn,lid: this.lid }).then((res) => {
          this.tableData_packages=res.data
          this.premium_num=res.data.length
        });
        this.$get("linePremiumRanges", { id: this.data.line_info.id }).then((res) => {
          this.premiumRangeList=res.data
        });
      });
    },
    // 提交修改
    confirm() {
      let type=true
      if (!this.data.insure_type&&this.data.insure_type!==0) {
        this.$refs.insure_type.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(this.data.insure_type==3){
        if(!this.data.bw_rate){
          this.$refs.bw_rate.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      if(!this.data.insure_unit_price){
        this.$refs.insure_unit_price.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if(this.insure_is_required){
        if(!this.data.insure_price){
          this.$refs.insure_price.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.data.premium_rate){
          this.$refs.premium_rate.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
      }else{
        if(this.data.is_insure===0){
          if(!this.data.insure_price){
            this.$refs.insure_price.$el.childNodes[2].childNodes[1].style.border='1px solid red'
            type=false
          }
          if(!this.data.premium_rate){
            this.$refs.premium_rate.$el.childNodes[2].childNodes[1].style.border='1px solid red'
            type=false
          }
        }
      }
      let arr=this.tableData_packages.filter(item=>{return !!item.checked})
      let isComplete=true
      if(arr.length==0){
        this.$message.warning(this.$t('ExpressOrderManagementLang.message1'));
        type=false
      }else{
        arr.forEach(item=>{
          if(item.express_sn.length==0){
            isComplete=false
            type=false
          }
        })
      }
      if(!isComplete){
        this.$message.warning(this.$t('ExpressOrderManagementLang.message2'));
      }
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        params.append("order_sn", this.data.order_sn);
        params.append("lid", this.data.lid);
        params.append("discount", this.data.discount);
        params.append("is_insure", this.data.is_insure);
        params.append("insure_price", this.data.insure_price);
        params.append("premium_rate", this.data.premium_rate);
        params.append("insure_unit_price", this.data.insure_unit_price);
        params.append("bw_rate", this.data.bw_rate);
        params.append("insure_type", this.data.insure_type);
        params.append("compensation_max", this.data.compensation_max);
        params.append("services", JSON.stringify(this.ServiceFeeList));
        params.append("packages", JSON.stringify(arr));


        params.append("remark", this.data.remark);
        this.$postForm("packageBill", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$emit("success");
            this.cancel()
            this.$message.success(res.msg);
          }
        });
      }
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      if(!this.isCodeDown){
        this.tabClickIndex = null
        this.tabClickLabel = null
      }
    },
    inputChange (row,prop) {
      if(prop=='gross_weight'){
        this.setWeight(row)
        this.getFreightPrice(row)
      }
      if(prop=='weight_calc_rule'){
        this.setWeight(row)
      }
      if(prop=='freight_price'||prop=='whole_price'||prop=='deduction_amount'){
        this.setFreightCost(row)
      }
      if(prop=='length'||prop=='width'||prop=='height'){
        if(row.length>0&&row.width>0&&row.height>0){
          row.volume=this.$computing((Number(row.length)*Number(row.width)*Number(row.height))/1000000,'fixed',5)
        }else{
          row.volume=0
        }
        if(row.volume<0.00001){
          row.volume=0.00001
        }
        this.setWeight(row)
        this.getFreightPrice(row)
      }
      if(prop=='volume'){
        row.width=0
        row.height=0
        row.length=0
        this.setWeight(row)
        this.getFreightPrice(row)
      }
    },
    //获取运费单价
    getFreightPrice:debounce(function(row) {
      let params = new FormData();
      params.append("order_sn", this.data.order_sn);
      params.append("lid", this.data.lid);
      params.append("gross_weight", row.gross_weight);
      params.append("volume", row.volume);
      this.$postForm("claFreight", params).then((res) => {
        row.freight_category=res.data.freight_category
        row.freight_category_name=this.options_protection.filter(item=>{return item.id==row.freight_category}).length>0?this.options_protection.filter(item=>{return item.id==row.freight_category})[0].name:''
        row.freight_price=res.data.freight_price
        row.whole_price=res.data.whole_price
        this.setFreightCost(row)
      });
    },500),
    // 计算计重
    setWeight(row){
      if(this.weight_type===3){
        let Gross_weight=row.gross_weight//通过毛重计算得出计重
        let Throwing_weight=this.$computing(Number(row.volume*1000000)/Number(this.weight_calc_rule),'ceil',1)//通过抛重计算得出计重
        if(Gross_weight>Throwing_weight){
          row.weight=Gross_weight
        }else{
          row.weight=Throwing_weight
        }
      }else if(this.weight_type===0){        
        row.weight=row.gross_weight
      }
      if(row.weight<=this.start_weight){
        row.weight=this.start_weight
      }else{
        let multiple_weight=this.$computing(Number(row.weight)/Number(this.renew_weight),'ceil',0)
        row.weight=this.$computing(Number(multiple_weight)*Number(this.renew_weight),'fixed',1)
      }
      row.cal_volume=row.volume
      if(row.cal_volume<=this.start_volume){
        row.cal_volume=this.start_volume
      }else{
        let multiple_volume=this.$computing(Number(row.cal_volume)/Number(this.renew_volume),'ceil',0)
        row.cal_volume=this.$computing(Number(multiple_volume)*Number(this.renew_volume),'fixed',3)
      }
      this.setDataWeight()
      this.setFreightCost(row)
    },
    // 计算计重、体积计总
    setDataWeight(){
      let arr=this.tableData_packages.filter(item=>{return !!item.checked})
      if(arr.length>0){
        this.data.bill_calweight=arr.reduce(function(acc, obj) {
          return acc + Number(obj.weight?obj.weight:0);
        }, 0);
        this.data.bill_cal_volume=arr.reduce(function(acc, obj) {
          return acc + Number(obj.cal_volume?obj.cal_volume:0);
        }, 0);
      }else{
        this.data.bill_calweight=0
        this.data.bill_cal_volume=0
      }
      this.data.bill_calweight=this.$computing(Number(this.data.bill_calweight),'fixed',1)
      this.data.bill_cal_volume=this.$computing(Number(this.data.bill_cal_volume),'fixed',3)
      this.match_premium_rate()
    },
    // 匹配对应保险费率
    match_premium_rate(){
      if(this.premiumRangeList.length>0){
        let arr=[]
        if(this.premiumRangeList[0].type==0){
          //区间类型是平均重量
          arr=this.premiumRangeList.filter(item=>{return this.data.insure_price/this.data.bill_calweight>=item.range_val_min&&this.data.insure_price/this.data.bill_calweight<=item.range_val_max})
        }else if(this.premiumRangeList[0].type==1){
          //区间类型是平均体积
          arr=this.premiumRangeList.filter(item=>{return this.data.insure_price/this.data.bill_cal_volume>=item.range_val_min&&this.data.insure_price/this.data.bill_cal_volume<=item.range_val_max})
        }else if(this.premiumRangeList[0].type==2){
          let density=0
          if(this.data.bill_cal_volume>0&&this.data.bill_calweight>0){
            density=this.$computing(Number(this.data.bill_calweight)/Number(this.data.bill_cal_volume),'fixed',2)
          }else{
            density=0
          }
          //区间类型是平均密度
          arr=this.premiumRangeList.filter(item=>{return this.data.insure_price/density>=item.range_val_min&&this.data.insure_price/density<=item.range_val_max})
        }else if(this.premiumRangeList[0].type==3){
          //区间类型是保值
          arr=this.premiumRangeList.filter(item=>{return this.data.insure_price>=item.range_val_min&&this.data.insure_price<=item.range_val_max})
        }
        if(arr.length>0){
          this.data.premium_rate=Number(arr[0].premium_rate)
        }else{
          this.data.premium_rate=0
        }
      }
    },
    // 计算包裹上运费
    setFreightCost(row){
      if(row.freight_category==2){
        row.freight_cost=this.$computing(Number(row.cal_volume)*Number(row.freight_price)+Number(row.whole_price?row.whole_price:0)-Number(row.deduction_amount),'fixed',2)
      }else if(row.freight_category==1||row.freight_category==3){
        row.freight_cost=this.$computing(Number(row.weight)*Number(row.freight_price)+Number(row.whole_price?row.whole_price:0)-Number(row.deduction_amount),'fixed',2)
      }
      row.freight_cost=Number(row.freight_cost)<0?0:row.freight_cost
      this.setPrice()
    },
    //计算运费、折后运费、折前费用、折后费用
    setPrice(){
      this.data.insure_costs=this.$computing(this.data.insure_price*this.data.premium_rate/100,'fixed',4)
      this.data.out_trans_price=this.sendDataArr_packages.reduce(function(acc, obj) {
        return acc + Number(obj.freight_cost);
      }, 0);
      console.log(this.data.out_trans_price)
      this.data.out_trans_price=this.$computing(Number(this.data.out_trans_price),'fixed',2)

      this.data.discount_Freight_value=this.$computing(this.data.out_trans_price*(100-Number(this.data.discount))/100,'fixed',2)

      this.data.out_total_price=this.$computing(Number(this.data.out_trans_price?this.data.out_trans_price:0)+Number(this.data.insure_costs?this.data.insure_costs:0)+Number(this.data.out_survey_price?this.data.out_survey_price:0),'fixed',2)

      this.data.Discounted_fees_value=this.$computing(Number(this.data.discount_Freight_value?this.data.discount_Freight_value:0)+Number(this.data.insure_costs?this.data.insure_costs:0)+Number(this.data.out_survey_price?this.data.out_survey_price:0),'fixed',2)
      this.setServiceFee()
    },
    //下拉框选择初始化
    inputType(type) {
      if(window.event.key=='Tab'&&window.event.keyCode==9){
        return
      }
      if(!type&&!this.isCodeDown){
        this.tabClickIndex = null
        this.tabClickLabel = null
      }
    },
    selectChange(row,prop){
      row[prop+'_name']=this.options_protection.filter(item=>{return item.id==row[prop]}).length>0?this.options_protection.filter(item=>{return item.id==row[prop]})[0].name:''
      // if(row.freight_category==3){
      //   row.weight_calc_rule=1
      // }else{
      //   row.weight_calc_rule=''
      // }
      this.setWeight(row)
    },
    //取消修改
    cancel() {
      this.data={}
      this.tableData_goods=[]
      this.tableData_packages=[]
      this.tabClickIndex = null
      this.tabClickLabel = null   
      this.ServiceFeeList=[]
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if(name=='insure_price'||name=='premium_rate'){
        if(this.insure_is_required){
          if (!this.data[name]&&this.data[name]!==0) {
            event.target.style.border = "1px solid red";
          }
        }else{
          if(this.data.is_insure===0){
            if (!this.data[name]&&this.data[name]!==0) {
              event.target.style.border = "1px solid red";
            }
          }
        }
      }else if(name=='contact_name'||name=='contact_tel'){
        if (!this.data[name]&&this.data[name]!==0&&this.data.dispatch_type!=3) {
          event.target.style.border = "1px solid red";
        }
      }else if(name=='contact_addr'){
        if (!this.data[name]&&this.data[name]!==0&&this.data.dispatch_type==1) {
          event.target.style.border = "1px solid red";
        }
      }else if(name=='pickup_addr'){
        if (!this.data[name]&&this.data[name]!==0&&this.data.pickup_type==2) {
          event.target.style.border = "1px solid red";
        }
      }else if(name=='bw_rate'){
        if (!this.data[name]&&this.data[name]!==0&&this.data.insure_type==3) {
          event.target.style.border = "1px solid red";
        }else{
        }
      }else if(name=='insure_unit_price'){
      }else{
        if (!this.data[name]&&this.data[name]!==0) {
          event.target.style.border = "1px solid red";
        }
      }
    },
    // 计算保险费
    setInsureCost(name){
      if(!!name&&name=='insure_price'){
        this.match_premium_rate()
      }
      this.data.insure_costs=this.$computing(this.data.insure_price*this.data.premium_rate/100,'fixed',4)
      this.setPrice()
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {

      if(data=='insure_type'){
        this.data.bw_rate=1
        this.$refs.bw_rate.$el.childNodes[2].childNodes[1].style.border = "1px solid #E0E3E9";
      }
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },

    // 多选框勾选集合
    setCheckBox(data){
      console.log(data)
      if(data.length>0&&this.sendDataArr_packages.length!=data.length){
        this.getServiceFeeList()
      }
      this.sendDataArr_packages=data
      this.setDataWeight()
      // this.setServiceFee()//计算服务费
      this.setPrice()
    },
    //多选框禁选
    checkSelectable({row}) {
        return row.out_bill_status==0
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 24%;
    }
  }
</style>